<template>
  <div>
    <el-button type="primary">
      <el-icon :size="14">
        <refresh-left />
      </el-icon>
      刷新
    </el-button>
  </div>
  <el-divider />
  <div>
    <el-table :data="departs" style="width: 100%;">
      <el-table-column fixed prop="id" label="编号" width="150" />
      <el-table-column prop="name" label="名称" width="250" />
      <el-table-column prop="remark" label="说明" width="180" />
      <el-table-column prop="bonusRemain" label="绩效余额"/>
      <el-table-column prop="updated" label="更新时间" width="180" />
      <el-table-column prop="statu" label="状态" width="120" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="edit(scope.row)">设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination v-model:currentPage="current" layout="prev, pager, next" :total="total" :hide-on-single-page="true"></el-pagination>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="设置工资员" width="15%" :before-close="handleClose">
    <div>
      <el-select v-model="depart.clerkId" placeholder="请设置工资员" @change="btnDisabled=false">
        <el-option
            v-for="emp in employees"
            :key="emp.id"
            :label="emp.name"
            :value="emp.id"
        >
        </el-option>
      </el-select>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {getDeparts, getEmployees, setClerk} from "@/api/wage";
import {ElMessage, ElPagination} from "element-plus";
import {RefreshLeft} from "@element-plus/icons-vue";

export default {
  name: "Depart",
  components: {RefreshLeft},
  setup() {
  },
  data() {
    return {
      departments: [],
      employees: [],
      depart: {
        id: null,
        clerkId: null
      },
      dialogVisible: false,
      btnDisabled: true,
      current: 1,
      size: 10
    }
  },
  created() {
    this.getDeparts()
  },
  methods: {
    getDeparts() {
      getDeparts().then(res => {
        this.departments = res.data
      })
    },
    handleClose(done) {
      this.dialogVisible = false
      done()
    },
    edit(row) {
      getEmployees(row.id).then(res => {
        this.depart.id = row.id
        this.depart.clerkId = res.data.clerkId
        this.employees = res.data.employees
        this.dialogVisible = true
      })
    },
    save() {
      if(this.depart.clerkId) {
        setClerk(this.depart).then(res => {
          ElMessage.success(res.msg)
          this.btnDisabled = true
          this.dialogVisible = false
        })
      }
    }
  },
  computed: {
    departs() {
      let data = []
      let _start = (this.current - 1) * this.size
      let _end = _start + this.size
      return this.departments.slice(_start, _end);
    },
    total() {
      return this.departments.length
    }
  }
}
</script>

<style scoped>

</style>